<template>
	<view class="order-detail white-bg">
		<view class="status-box">{{ orderStatusList.find((child) => child.value == info.orderStatus)?.label }}</view>
		<view class="auto-box container-box">
			<scroll-view scroll-y style="height: 100%">
				<view>
					<view class="info-box">
						<view class="mark-box">订单信息</view>
						<view class="title-box mt-20-box">{{ info.routeTitle }}</view>
						<view class="mt-20-box">参营日期：{{ info.campPeriodStartDate }} ~ {{ info.campPeriodEndDate }}</view>
						<view class="mt-20-box">参营人数：{{ info.num }}</view>
						<view class="mt-20-box">订单价格：{{ info.payAmount }}</view>
						<view class="mt-20-box">订单编号：{{ info.orderNo }}</view>
						<view class="mt-20-box">支付时间：{{ info.payTime }}</view>
						<view class="mt-20-box">支付方式：{{ getDictName(info.payType) }}</view>
						<view class="mt-20-box">营员姓名：{{ info.camperInfo }}</view>
						<view class="mt-20-box">启程集合地：{{ info.meetLocation?.locationName }}</view>
						<view class="mt-20-box">集合时间：{{ info.meetLocation?.meetTimeDesc }}</view>
						<view class="mt-20-box">*请务必在集合时间内将营员送至集合地，如未送达将无法参营</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex-box operate-box" v-if="info.orderStatus == 0">
			<view class="add-box auto-box" @tap.stop="handleNext">{{ getBtnText() }}</view>
		</view>
	</view>
</template>

<script setup>
import { func } from '@/uni_modules/uv-ui-tools/libs/function/test';
import { ref, reactive, onMounted } from 'vue';
import { onLoad, onBackPress } from '@dcloudio/uni-app';
import OrderApi from '@/api/order/api';
// 订单详情
const info = ref({});
let orderStatusList = [];
/**
 * @description 下一步
 */
function handleNext() {
	if (info.value.orderStatus === 0) {
		handlePay();
	}
}
function getBtnText() {
	switch (info.value.orderStatus) {
		case 0:
			return '立即支付';
		case 1:
			return '导航至集合点';
	}
}
// 设置状态字典
uni.getStorageSync('dict').forEach((item) => {
	if (item.typeCode === 'orderStatus') {
		orderStatusList = item.options;
	}
});
/**
 * @description 立即支付
 */
function handlePay() {
	if (uni.sendNativeEvent) {
		uni.sendNativeEvent('navigatePay', { orderSn: info.value.orderSn, hideSuccessPage: true }, (res) => {
			if (res.code == 1) {
				let data = res.data || {};
				if (typeof data === 'string') {
					data = JSON.parse(data);
				}
				// uni.showToast({
				// 	title:res.data,
				// 	duration: 10000,
				// 	icon:'none'
				// })
				// uni.showModal({
				// 	title: 'order_sn:' + data.order_sn
				// });
				// uni.showModal({
				// 	title: 'merchant_order_sn:' + data.merchant_order_sn
				// });
				const params = {
					orderSn: data.order_sn,
					merchantOrderSn: data.merchant_order_sn
				};
				OrderApi.callback(params);
			}
			uni.redirectTo({
				url: '/pages/order/index?status=99'
			});
			// res 为
			console.log('navigatePay----' + JSON.stringify(res));
		});
	}
}
/**
 * @description 导航集合
 */
function handleNavigate() {}
function getDetailInfo(orderId) {
	OrderApi.getOrderDetail(orderId).then((res) => {
		info.value = res.data;
	});
}

onLoad((option) => {
	getDetailInfo(option.orderId);
});

function getDictName(code) {
	let name = '';
	uni.getStorageSync('dict').forEach((item) => {
		if (item.typeCode === 'payType') {
			name = item.options.find((obj) => obj.value == code)?.label;
		}
	});
	return name;
}

const canBack = ref(false);
//如果有搜索结果 返回时刷新当前页面
onBackPress(() => {
	if (info.value?.orderStatus === 0 && !canBack.value) {
		uni.showModal({
			title: '提示',
			content: '订单有5分钟的支付时间，超时后将自动取消订单，确定暂不支付？',
			cancelText: '暂不支付',
			confirmText: '继续支付',
			success: function (res) {
				if (res.confirm) {
					//支付
					handlePay();
				} else if (res.cancel) {
					canBack.value = true;
					uni.navigateBack();
				}
			}
		});
		return true;
	}
});
</script>

<style lang="scss" scoped>
.order-detail {
	height: 100%;
	display: flex;
	flex-direction: column;
	.container-box {
		overflow: hidden;
		font-size: 28rpx;
		color: rgba(128, 128, 128, 1);
	}
	.status-box {
		padding: 80rpx 0;
		font-size: 60rpx;
		text-align: center;
		color: #43cf7c;
	}
	.info-box {
		margin: 0 32rpx;
		padding: 28rpx 34rpx 46rpx 34rpx;
		border: 1rpx solid rgba(128, 128, 128, 0.36);
		border-radius: 10rpx;
	}
	.mark-box {
		font-size: 32rpx;
		color: #000;
	}
	.title-box {
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #000;
	}
	.mt-20-box {
		margin-top: 20rpx;
	}
	.operate-box {
		justify-content: space-around;
		background: #fff;
		padding: 30rpx 0;
	}

	.add-box {
		border-radius: 10rpx;
		background: rgba(67, 207, 124, 1);
		font-size: 32rpx;
		color: #fff;
		padding: 22rpx 42rpx;
		margin: 0 94rpx;
		text-align: center;
	}
}
</style>
